﻿{% extends "base/index.html" %}

{% block css %}
    <link rel="stylesheet" href="/static/ztree3/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
{% endblock %}

{% block center %}

    <!--用户信息-->
    <div class="panel panel-default center-top" style="min-width:auto;">
        <div class="panel-heading">
            <div class="row" style="padding-top:5px;padding-left:10px;">
                <div class="col-sm-6">
                    <a href="javascript:;" class="btn btn-sm btn-success" data-toggle="modal" data-target="#roleModal">
                        添加</a>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div style="margin-bottom: 10px;">
                <div class="col-sm-12">
                    <table class="table table-hover">
                        <thead>
                        <tr style="background-color: #f5f5f5;">
                            <th>ID</th>
                            <th>角色</th>
                            <th>授权</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for i in data_list %}
                            <tr name="tbody">
                                <td>{{ i.id }}</td>
                                <td>{{ i.title }}</td>
                                <td>
                                    <a href="javascript:;" style="text-decoration:none;" name="roleperms"
                                       role_id="{{ i.id }}">权限</a>&nbsp;&nbsp;&nbsp;
                                    <a href="javascript:;" style="text-decoration:none;" name="roleplatform"
                                       role_id="{{ i.id }}">平台</a>&nbsp;&nbsp;&nbsp;
                                    <a href="javascript:;" style="text-decoration:none;" name="roleasset"
                                       role_id="{{ i.id }}">资产</a>&nbsp;&nbsp;&nbsp;
                                </td>
                                <td style="padding-left:5px;">
                                    <a href="javascript:;" style="text-decoration:none;" name="edit-role"
                                       role_id="{{ i.id }}" data-toggle="tooltip" data-placement="left" title="修改"><span
                                            class="fa fa-pencil"></span> </a>&nbsp;&nbsp;&nbsp;
                                    <a href="javascript:;" style="text-decoration:none;" name="del-role"
                                       role_id="{{ i.id }}" data-toggle="tooltip" data-placement="right"
                                       title="删除"><span class="fa fa-trash"></span> </a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <div class="text-right" style="margin-top:-30px;padding-right:9%">
                        <ul class="pagination" id="pager">
                            <li class="previous"><a href="/rbac/role/1/">首页</a></li>
                            {#上一页按钮开始#}
                            {# 如果当前页有上一页#}
                            {% if data_list.has_previous %}
                                {#  当前页的上一页按钮正常使用#}
                                <li class="previous"><a href="/rbac/role/{{ data_list.previous_page_number }}/">上一页</a>
                                </li>
                            {% else %}
                                {# 当前页的不存在上一页时,上一页的按钮不可用#}
                                <li class="previous disabled"><a href="javascript:;">上一页</a></li>
                            {% endif %}
                            {#上一页按钮结束#}
                            {# 页码开始#}
                            {% for num in page_list %}
                                {% if num == currentPage %}
                                    <li class="item active"><a href="/rbac/role/{{ num }}/">{{ num }}</a></li>
                                {% else %}
                                    <li class="item"><a href="/rbac/role/{{ num }}/">{{ num }}</a></li>
                                {% endif %}
                            {% endfor %}
                            {#页码结束#}
                            {# 下一页按钮开始#}
                            {% if data_list.has_next %}
                                <li class="next"><a href="/rbac/role/{{ data_list.next_page_number }}/">下一页</a></li>
                            {% else %}
                                <li class="next disabled"><a href="javascript:;">下一页</a></li>
                            {% endif %}
                            <li class="previous"><a href="/rbac/role/{{ page_nums }}/">尾页</a></li>
                            {# 下一页按钮结束#}
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>

{% endblock %}

<!-- Modal -->
{% block modal %}

    <div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="roleModalLabel">添加</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>角色名称</label>
                        <input class="form-control" placeholder="角色名称" id="role">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-role">提交</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="edit-roleModal" tabindex="-1" role="dialog" aria-labelledby="edit-roleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="edit-roleModalLabel">修改</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>角色名称</label>
                            <input class="form-control" placeholder="角色名称" id="edit-role">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-edit-role">提交</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="edit-rolepermsModal" tabindex="-1" role="dialog"
         aria-labelledby="edit-rolepermsModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="edit-rolepermsModalLabel">权限</h4>
                </div>
                <div class="modal-body" style="max-height:500px;overflow:auto;">
                    <ul id="treeperms" class="ztree"></ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-edit-roleperms">提交</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="edit-roleplatformModal" tabindex="-1" role="dialog"
         aria-labelledby="edit-roleplatformModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="edit-roleplatformModalLabel">平台</h4>
                </div>
                <div class="modal-body" style="max-height:500px;overflow:auto;">
                    <ul id="treeplatform" class="ztree"></ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-edit-roleplatform">提交</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="edit-roleassetModal" tabindex="-1" role="dialog"
         aria-labelledby="edit-roleassetModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="edit-roleassetModalLabel">资产</h4>
                </div>
                <div class="modal-body" style="max-height:500px;overflow:auto;">
                    <ul id="treeasset" class="ztree"></ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-edit-roleasset">提交</button>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script type="text/javascript" src="/static/mystyle/js/rbac.js"></script>
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.exedit.js"></script>
    <script type="text/javascript">
        //获取授权
        $(document).ready(function () {
            $('td a[name="roleperms"]').click(function () {
                var role_id = $(this).attr("role_id");
                $.post("/rbac/getperms/", {'role_id': role_id}, function (data) {
                    var ret = eval('(' + data + ')');
                    if (ret.status == "False") {
                        spop({
                            template: ret.info,
                            style: 'warning',
                            autoclose: 5000
                        });
                    } else {
                        var info = ret.info;
                        var setting = {
                            view: {
                                addHoverDom: false,
                                removeHoverDom: false,
                                selectedMulti: false,
                            },
                            check: {
                                enable: true
                            },
                            data: {
                                simpleData: {
                                    enable: true
                                }
                            },
                            edit: {
                                enable: false
                            }
                        };
                        var zNodes = info;
                        $.fn.zTree.init($("#treeperms"), setting, zNodes);
                        $("#sub-edit-roleperms").attr('role_id', role_id);
                        $("#edit-rolepermsModal").modal('show');
                    }
                });
            });
        });

        //角色权限授权
        $("#sub-edit-roleperms").click(function () {
            var role_id = $(this).attr("role_id");
            var treeObj = $.fn.zTree.getZTreeObj("treeperms");
            var nodes = treeObj.getCheckedNodes(true);
            var node_ids = new Array();
            for (var i = 0; i < nodes.length; i++) {
                node_ids[i] = nodes[i].id;
            }
            node_id_json = JSON.stringify(node_ids);
            $.post("/rbac/addperms/", {'node_id_json': node_id_json, 'role_id': role_id}, function (data) {
                var ret = eval('(' + data + ')');
                if (ret.status == "False") {
                    spop({
                        template: ret.info,
                        style: 'warning',
                        autoclose: 5000
                    });
                } else {
                    $("#edit-rolepermsModal").modal('hide');
                    spop({
                        template: ret.info,
                        style: 'success',
                        autoclose: 2000
                    });
                    setTimeout("location.reload()", 2000);
                }
            });
        });


        //获取授权资产
        $(document).ready(function () {
            $('td a[name="roleasset"]').click(function () {
                var role_id = $(this).attr("role_id");
                $.post("/rbac/getasset/", {'role_id': role_id}, function (data) {
                    var ret = eval('(' + data + ')');
                    if (ret.status == "False") {
                        spop({
                            template: ret.info,
                            style: 'warning',
                            autoclose: 2000
                        });
                    } else {
                        var info = ret.info;
                        var setting = {
                            view: {
                                addHoverDom: false,
                                removeHoverDom: false,
                                selectedMulti: false,
                            },
                            check: {
                                enable: true
                            },
                            data: {
                                simpleData: {
                                    enable: true
                                }
                            },
                            edit: {
                                enable: false
                            }
                        };
                        var zNodes = info;
                        $.fn.zTree.init($("#treeasset"), setting, zNodes);
                        $("#sub-edit-roleasset").attr('role_id', role_id);
                        $("#edit-roleassetModal").modal('show');
                    }

                });
            });

        });

        //角色资产授权
        $("#sub-edit-roleasset").click(function () {
            var role_id = $(this).attr("role_id");
            var treeObj = $.fn.zTree.getZTreeObj("treeasset");
            var nodes = treeObj.getCheckedNodes(true);
            var node_ids = new Array();
            for (var i = 0; i < nodes.length; i++) {
                node_ids[i] = nodes[i].id;
            }
            node_id_json = JSON.stringify(node_ids)
            $.post("/rbac/addasset/", {'node_id_json': node_id_json, 'role_id': role_id}, function (data) {
                var ret = eval('(' + data + ')');
                if (ret.status == "False") {
                    spop({
                        template: ret.info,
                        style: 'warning',
                        autoclose: 2000
                    });
                } else {
                    $("#edit-roleassetModal").modal('hide');
                    spop({
                        template: ret.info,
                        style: 'success',
                        autoclose: 2000
                    });
                    setTimeout("location.reload()", 2000);
                }
            });
        });


        //获取平台
        $(document).ready(function () {
            $('td a[name="roleplatform"]').click(function () {
                var role_id = $(this).attr("role_id");
                $.post("/rbac/getplatform/", {'role_id': role_id}, function (data) {
                    var ret = eval('(' + data + ')');
                    if (ret.status == "False") {
                        spop({
                            template: ret.info,
                            style: 'warning',
                            autoclose: 2000
                        });
                    } else {
                        var info = ret.info;
                        var setting = {
                            view: {
                                addHoverDom: false,
                                removeHoverDom: false,
                                selectedMulti: false,
                            },
                            check: {
                                enable: true
                            },
                            data: {
                                simpleData: {
                                    enable: true
                                }
                            },
                            edit: {
                                enable: false
                            }
                        };
                        var zNodes = info;
                        $.fn.zTree.init($("#treeplatform"), setting, zNodes);
                        $("#sub-edit-roleplatform").attr('role_id', role_id);
                        $("#edit-roleplatformModal").modal('show');
                    }

                });
            });

        });


        //角色平台授权
        $("#sub-edit-roleplatform").click(function () {
            var role_id = $(this).attr("role_id");
            var treeObj = $.fn.zTree.getZTreeObj("treeplatform");
            var nodes = treeObj.getCheckedNodes(true);
            var node_ids = new Array();
            for (var i = 0; i < nodes.length; i++) {
                node_ids[i] = nodes[i].id;
            }
            node_id_json = JSON.stringify(node_ids)
            $.post("/rbac/addplatform/", {'node_id_json': node_id_json, 'role_id': role_id}, function (data) {
                var ret = eval('(' + data + ')');
                if (ret.status == "False") {
                    spop({
                        template: ret.info,
                        style: 'warning',
                        autoclose: 2000
                    });
                } else {
                    $("#edit-roleplatformModal").modal('hide');
                    spop({
                        template: ret.info,
                        style: 'success',
                        autoclose: 2000
                    });
                    setTimeout("location.reload()", 2000);
                }
            });
        });

    </script>

{% endblock %}


